<!DOCTYPE html>

<html lang="en">

	<head>
		<title>PAGETITLE</title>
		<link href="vendor/bootstrap.min.css" rel="stylesheet">
        <script src="vendor/jquery-3.5.1.slim.min.js"></script>
        <script src="vendor/sorttable.js"></script>

		<style>
			body {
			  padding-top: 50px;
			}
			body {
				background-color: linen;
			}
			h1 {
				color: black
			}
			h2 {
				color: gray;
			}
			table, th, td, tr {
				border: 1px solid black;
				border-collapse: collapse;
				text-align: center;
				padding: 5px;
			}
			.tftable {font-size:12px;color:#fbfbfb;border-width: 1px;border-color: #686767;border-collapse: collapse;margin: 10px auto;}
			.tftable th {font-size:12px;background-color:#171515;border-width: 1px;padding: 8px;border-style: solid;border-color: #686767;text-align:center;}
			.tftable tr {background-color:#2f2f2f;}
			.tftable td {font-size:12px;border-width: 1px;padding: 8px;border-style: solid;border-color: #686767;}
			.tftable tr:hover {background-color:#171515;}
			.tftable tr.selected {background-color:#171515;}
		</style>


                <script>

                  function myboolean(value) {
                    return !(value=="false" || value=="" || value==null);
                  }
                  function getOrderKey(tr) {
                    var row = $(tr).find("td");
                    if(row.length==0){ return null; }
                    return $(row[1]).text().replace(/_*$/g,"")+"/"+$(row[2]).text();
                  }

                  var selected;
                  $(document).ready(function(){
                    var rows = $("table.tftable tr");
                    var i;
                    /*for(i=1 ; i<rows.length ; i++){
                      $($(rows[i]).find("td")[1]).css( "background-color", "red" );
                    }*/
                    for(i=1 ; i<rows.length ; i++) {
                      var key = getOrderKey(rows[i]);
                        if(key!=null && myboolean(localStorage.getItem(key))){
                          $(rows[i]).addClass("selected");
                        }
                    }


                  $(".tftable tr").click(function(){
                    $(this).toggleClass("selected");
                    var element = getOrderKey(this);
                    // toggle:
                    localStorage.setItem(element,String(!myboolean(localStorage.getItem(element))));
                  });

                  });
                  </script>
		
	</head>


	<body>
		<nav class="navbar navbar-inverse navbar-fixed-top">
	      <div class="container">
	        <div class="navbar-header">
	        	<a class="navbar-brand" href=".">Join Market</a>
	        </div>
	        <div id="navbar" class="collapse navbar-collapse">
	          <ul class="nav navbar-nav">
	            <li class="active"><a href=".">Orders</a></li>
                <li><a href="fidelitybonds">Fidelity Bonds</a></li>
	            <li><a href="ordersize">Size Distribution</a></li>
	            <li><a href="depth">Depth</a></li>
                <li><a href="sybilresistance">Sybil resistance</a></li>
	            <li><a href="orderbook.json">Export orders</a></li>
	            <li><a target="_blank" href="https://github.com/JoinMarket-Org/joinmarket-clientserver/releases">New segwit version</a></li>
	          </ul>
	        </div><!--/.nav-collapse -->
	      </div>
	    </nav>

		<div style="text-align:center; margin:0px auto;">
			<h1>MAINHEADING</h1>
			<h2>SECONDHEADING</h2>

			MAINBODY
			<br>
		</div>
	</body>

</html>
